<template>
    <div class="cascader_list">
        <div class="cascader_item flexbox flexcenter flexbetween" v-for="(item,index) in testList" :key="index" @click="getNode(item,index)">
            <el-checkbox v-model="item.check" @change="getChecked">{{item.name}}</el-checkbox>
            <span class="el-icon-arrow-right" v-if="item.hasOwnProperty('children')"></span>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            testList: [
                {
                    id: 0,
                    name: "全选",
                },
                {
                    id: 1,
                    name: "信息",
                    children: [
                        {
                            id: 3,
                            name: "计算机",
                        },
                    ],
                },
                {
                    id: 2,
                    name: "经济",
                    children: [
                        {
                            id: 4,
                            name: "基金",
                        },
                    ],
                },
            ],
        };
    },
    created() {
        
    },
    computed: {
        
    },
    methods: {
        getNode(val,index){
            console.log(val);
        }
    },
    components: {},
};
</script>


<style scoped>
.cascader_list {
    height: 200px;
    overflow: auto;
}
.cascader_item {
    padding: 0 12px;
    height: 32px;
}
.cascader_item:hover {
    background-color: #f5f5f5;
}
</style>

